function circleProgress(value, average, id) {
    var canvas = document.getElementById(id);
    var width = canvas.width,height=canvas.height;
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";
    var context = canvas.getContext('2d');

    var _this = $(canvas),
        value = Number(value),// 当前百分比,数值
        average = Number(average),// 平均百分比
        color = "",// 进度条、文字样式
        maxpercent = 100,//最大百分比，可设置
        c_width=height,
        c_height=width;

    // 清空画布
     context.clearRect(0, 0, c_width, c_height);
    context.beginPath();
    // 将起始点移到canvas中心
    context.moveTo(c_width / 2, c_height / 2);
    // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆
    context.arc(c_width / 2, c_height / 2, c_height / 2-2, 0, Math.PI * 2, false);
    context.closePath();
    context.fillStyle = '#ddd'; //填充颜色
    context.fill();

    // 绘制内圆
    context.beginPath();
    context.strokeStyle = '#FA7948';
    context.lineCap = 'butt';
    context.closePath();
    context.fill();
    context.lineWidth = 3;//绘制内圆的线宽度

    function draw(cur) {
        //context.globalCompositeOperation = 'source-atop';
        // 画内部空白
        context.beginPath();
        context.moveTo(24, 24);
        context.arc(c_width / 2, c_height / 2, c_height / 2 - 6, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,255,255,1)';  // 填充内部颜色
        // context.fillStyle = '#fff';  // 填充内部颜色
        context.fill();
        // 画内圆
        context.beginPath();
        // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
        // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
        context.arc(c_width / 2, c_height / 2, c_height / 2 - 4, -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
        context.stroke();
    }
    // 调用定时器实现动态效果
    var timer = null, n = 0;
    function loadCanvas(nowT) {
        timer = setInterval(function () {
            if (n > nowT) {
                clearInterval(timer);
            } else {
                draw(n);
                n += 0.01;
            }
        }, 15);
    }

    loadCanvas(value / 100);
    timer = null;
};


$(document).ready(function () {

    var Animate = function () {
        var self = this;
        self.stop = true;
        self.poptimer = null;
        self.popOptions = {
            index: 1,
            interval: 2000
        }
        self.countUpOptions = {
            useEasing: true,
            useGrouping: false,
            separator: ',',
            decimal: '.'
        };
        self.cuDuration = 2;
//初始化跳动的数字
        self.cu0 = new CountUp("s4num0", 0, 55, 0, self.cuDuration, self.countUpOptions);
        self.cu1 = new CountUp("s4num1", 0, 18000, 0, self.cuDuration, self.countUpOptions);
        self.cu21 = new CountUp("s4num21", 0, 2, 0, self.cuDuration, self.countUpOptions);
        self.cu22 = new CountUp("s4num22", 0, 3, 0, self.cuDuration, self.countUpOptions);
        self.cu3 = new CountUp("s4num3", 0, 100, 0, self.cuDuration, self.countUpOptions);
        self.cu4 = new CountUp("s4num4", 0, 20, 0, self.cuDuration, self.countUpOptions);

        self.start = function () {
            self.stop = false;
            self.go1(0);
            self.go3();
        }

        //落下并启动跳动的数字
        self.go1 = function (index) {
            $(".section4 .right_block li").eq(index).animate({'opacity': 1, 'top': 0}, 300, function () {
                self.go2(index);
                index++;
                if (index <= 4) {
                    self.go1(index);
                    self.go2(index);
                }
            });
        }
        //貌似没用着
        self.go11 = function (index) {
            $(".section4 .right_block li").animate({'opacity': 1}, 2000, function () {
                self.go2('all');
            });
        }
        //数字跳动
        self.go2 = function (index) {
            if (index == 0) {
                self.cu0.start();
                circleProgress(60, 50, 'canvasyuan1');
            }
            if (index == 1) {
                self.cu1.start();
                circleProgress(80, 50, 'canvasyuan2');
            }
            if (index == 2) {
                self.cu21.start();
                self.cu22.start();
                circleProgress(60, 50, 'canvasyuan3');
            }
            if (index == 3) {
                self.cu3.start();
                circleProgress(20, 50, 'canvasyuan4');
            }
            if (index == 4) {
                self.cu4.start();
                circleProgress(40, 50, 'canvasyuan5');
            }
            if (index == 'all') {
                self.cu0.start();
                self.cu1.start();
                self.cu21.start();
                self.cu22.start();
                self.cu3.start();
                self.cu4.start();
            }
        }

        //节点动画（轮流显示各个节点）
        self.go3 = function () {
            var length = $(".global-map .pop-list .area").length;
            self.poptimer = setInterval(function () {
                $(".pop-list span").removeClass("pop-active");
                if (self.popOptions.index > length) {
                    self.popOptions.index = 1
                }
                var i = self.popOptions.index;
                $(".global-map .dot").removeClass("animation-dot");
                $(".global-map .dot-icon").removeClass("animation-icon");
                $(".pop-list span").removeClass("pop-active");
                $(".pop-list span[data-index=" + i + "]").addClass("pop-active");
                $(".dot-icon[data-index-icon=" + i + "]").addClass("animation-icon");
                $(".dot[data-index-to=" + i + "]").addClass("animation-dot");
                self.popOptions.index++;
            }, self.popOptions.interval)
        }
    };

    var animation = new Animate();
    $(document).scroll(function () {
        var scrollTop = $(window).scrollTop();
        var scrennHeight = $(window).height();
        var s4Top = $(".section4").offset().top;
        if (scrollTop + scrennHeight > s4Top + 350) {
            if (animation.stop) {
                animation.start();
            }
        }
    });

//鼠标移至事件节点事件
    $(".global-map .dot-icon").hover(function () {
            var i = $(this).data("index-icon");
            if (animation.poptimer) {
                clearInterval(animation.poptimer);
            }
            animation.popOptions.index = i + 1;

            $(".pop-list span").removeClass("pop-active");
            $(".global-map .dot-icon").removeClass("animation-icon");
            $(".global-map .dot").removeClass("animation-dot");
            $(".pop-list span[data-index=" + i + "]").addClass("pop-active");
            $(".dot-icon[data-index-icon=" + i + "]").addClass("animation-icon");
            $(".dot[data-index-to=" + i + "]").addClass("animation-dot");

        }, function () {
            var i = $(this).data("index-icon");
            $(".pop-list span").removeClass("pop-active");
            $(".global-map .dot-icon").removeClass("animation-icon");
            $(".global-map .dot").removeClass("animation-dot");
            animation.go3();
        }
    );
})


